import React, { Suspense } from "react";
import styles from "./index.module.scss";
import { Button, Image, ProgressBar, Skeleton } from "antd-mobile";
import {
  Await,
  useAsyncValue,
  useLoaderData,
  useNavigate,
} from "react-router-dom";

type Props = {};

// 父组件
export default function index({}: Props) {
  let loaderData = useLoaderData();

  return (
    // React.lazy 懒加载组件
    // Promise三个状态：fulfilled(完成) rejected(拒绝) pending(等待)
    // Promise().then(res => {

    // })

    <Suspense
      // pending(等待)
      fallback={
        <div className="qdtabbar-container">
          {/* 骨架屏 */}
          <Skeleton.Title animated />
          <Skeleton.Paragraph lineCount={5} animated />
          <Skeleton.Paragraph lineCount={5} animated />
          <Skeleton.Paragraph lineCount={5} animated />
          <Skeleton.Paragraph lineCount={5} animated />
        </div>
      }
    >
      {/* fulfilled rejected padding */}
      <Await
        children={<Child />} // fulfilled
        errorElement={<>页面加载失败，请刷新</>} // rejected
        resolve={(loaderData as any).getData()}
      />
    </Suspense>
  );
}

// 子组件
function Child() {
  // useAsyncValue是获取Await组件中的 resolve的返回值。
  const homeData = useAsyncValue() as IHomeData;
  const navigate = useNavigate();

  return (
    <div className={[styles.container, "qdtabbar-container"].join(" ")}>
      {/* 标题风格1 */}
      <div className="qd-title1-area">
        <div className="qd-bigtitle">{homeData?.exam.title}</div>

        <div
          className="qd-changeitem"
          onClick={() => {
            let actionCode = homeData.exam.actionCode;
            navigate(
              "/toggle?actionCode=" +
                actionCode +
                "&defaulttitle=" +
                homeData?.exam.title
            );
          }}
        >
          切换考试科目
        </div>
      </div>

      {/* 学习信息 */}
      <div className="qd-information-area">
        <div className="qd-information-welcome">欢迎Tomato来到XX学习库！</div>
        <div className="qd-information-img">
          <Image src="./images/home/xiaolang.png" fit="fill" />
        </div>
        <div className="qd-information-total">
          已学{homeData?.study}题 | 共{homeData?.exam.itemCount}题
        </div>
        <div className="qd-information-error">
          <div className="qd-information-error-bigtitle">{homeData?.wrong}</div>
          <div className="qd-information-error-ltitle">错题</div>
        </div>
        <div className="qd-information-collection">
          <div className="qd-information-error-bigtitle">
            {homeData?.collect}
          </div>
          <div className="qd-information-error-ltitle">收藏</div>
        </div>
      </div>

      {/* nav导航 */}
      <div className="qd-navigation-area">
        <div className="qd-navigation-img">
          <Image src="./images/home/examination.png" />
        </div>
        <div className="qd-navigation-img">
          <Image src="./images/home/books.png" />
        </div>
        <div className="qd-navigation-img">
          <Image src="./images/home/practice.png" />
        </div>
      </div>

      {/* 标题风格2 */}
      <div className="qd-title2-area">
        <div className="qd-bigtitle">学科题库</div>
        <div className="qd-changeitem">坚持每一天，成长看得见</div>
      </div>

      {/* 题库入口 */}
      <div className="qd-examentry-area">
        {homeData?.exemItems.map((item, index) => {
          return (
            <div className="qd-examentry-item" key={index}>
              <div className="qd-examentry-item-column1">
                <Image src="./images/home/subject.png"></Image>
              </div>
              <div className="qd-examentry-item-column2">
                <div>{item.title}</div>
                <div>
                  {item.itemCount - item.invalid}/{item.itemCount}题
                </div>
                <div>
                  <ProgressBar
                    percent={(item.itemCount - item.invalid) / item.itemCount}
                  />
                </div>
              </div>
              <div className="qd-examentry-item-column3">
                {/* 在行内样式写的话，不会转换成vw */}
                <Button
                  color="primary"
                  onClick={() =>
                    navigate("/pratice?actionCode=" + item.actionCode)
                  }
                >
                  练习
                </Button>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// 1、安装vscode的扩展JSON to TS
// 2、在json文档中，选全选，再按Shift + Ctrl + Alt + S
// 首页请求数据
interface IHomeData {
  exam: IExam;
  exemItems: IExemItem[];
  collect: number;
  wrong: number;
  study: number;
}

// 考试项目接口
interface IExemItem {
  id: number;
  pid: number;
  businessLevel?: any;
  numberLevel: number;
  title: string;
  info: string;
  actionCode: string;
  actionType: string;
  actionName: string;
  createTime: string;
  updateTime?: string;
  invalid: number;
  sort: number;
  createUser: string;
  tenantId?: any;
  itemCount: number;
}

// 考试信息
interface IExam {
  id: number;
  pid?: any;
  businessLevel?: any;
  numberLevel: number;
  title: string;
  info: string;
  actionCode: string;
  actionType: string;
  actionName: string;
  createTime: string;
  updateTime: string;
  invalid: number;
  sort: number;
  createUser: string;
  tenantId?: any;
  itemCount: number;
}

// 重新渲染的时候，函数组件会重新进来。执行顺序是从上往下的。

// 响应式的值
// 为什么要定义成const，它不是变量吗？
// 因为每次重新渲染组件的时候，都会重新定义这里的count。
// 而且由不希望在后续使用count的时候，被修改，所有用const定义改常量的原因。
// const count = useSelector(selectCount);

// 返回一个函数
// const dispatch = useDispatch();
// 利用dispatch来触发redux的方法
// dispath函数调用的对象里面的type指定的是，模块中的具体方法
// payload, 是具体方法的第二参数的成员
// dispatch({ type: "system/add", payload: "aaaaaaaaaaa" });
// dispatch(add('aaaaaaaaaaaaaaaaaaaaaa'));

//---------------------------------------------------------------------------
// 1、searchParams, 浏览器上的url
// 在链接后面加上
//     ?键=值&键=值&键=值&键=值
// http://127.0.0.1:5173/#/toggle/actionCode?=1334411120332562433
// http://127.0.0.1:5173/#/toggle?actionCode=1334411120332562433

// const [searchParams, setSearchParams] useSearchParams()
// searchParams.get('actionCode')
// 优点是刷新后，分享链接后，参数不掉

// // ----------------------------------------------------------------------
// 2、路由的path
// 怎么定义？
//     在注册路由的时候
//     {
//         path: "/home/:id/:name",
//         element: <App />
//     }

// http://127.0.0.1:5173/#/home/100/小明
// 怎么获取参数？
//     let params = useParams()
//     params是一个对象
//     {
//         id: "",
//         name: ""
//     }
// 优点是刷新后，分享链接后，参数不掉
// 必须全部匹配路径才能进入页面

// // ----------------------------------------------------------------------
// 3、通过navigate来传参
//     声明式导航：NavLink和Link
//     编程式导航：
//         navigate 从 useNavigate的hook生成的函数

//     路由上的 state

// <NavLink to="/login" state={{aa: "aaaa"}} style={() => {}} />
// <Link to="/login" state={{aa: "aaaa"}} />
// navigate('/login', {
//     state: {
//         aa: "aaaa"
//     }
// })

// const location = useLocation()

// 优点是：传参的信息，不会暴露在url上面
// 缺点是，分享链接后，参数丢失、（history.state）刷新后 有可能会丢失
